<template>
  <div class="login">
    <div class="content">
      <el-row style="height:100%;padding:0px;margin:0px;">
        <el-col :span="12" :class="['login-area']">

          <el-row :class="['login-title']">
            <span :class="{'login-button':true,'active-button':activeIndex===1}" @click="activeIndex=1">登录</span>
            <span :class="{'login-button':true,'active-button':activeIndex===2}" @click="activeIndex=2">注册</span>
          </el-row>

          <el-row v-if="activeIndex===1" :class="['login-form']">
            <div>
              <input v-model="loginForm.username" placeholder="帐号"></input>
              <input v-model="loginForm.password" placeholder="密码"></input>
              <button @click="handleLogin">登录</button>
            </div>
          </el-row>
          <el-row v-else :class="['register-form']">


            <el-form ref="form" :model="registerForm" label-width="80px">
              <el-col :span="11">
                <el-form-item label="用户名" class="test">
                  <el-input v-model="registerForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input type="password" v-model="registerForm.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                  <el-input type="password" v-model="password2"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名">
                  <el-input v-model="registerForm.realname"></el-input>
                </el-form-item>
                <el-form-item label="生出日期">

                  <el-date-picker type="date" placeholder="选择日期" v-model="registerForm.birthDate"
                                  style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio-group v-model="registerForm.gender">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="0">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="证件类型">
                  <el-select v-model="registerForm.identityCardType" placeholder="请选择证件类型">
                    <el-option label="居民身份证" :value="1"></el-option>
                    <el-option label="军官证" :value="2"></el-option>
                    <el-option label="护照" :value="3"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="证件号码">
                  <el-input v-model="registerForm.identityCardNo"></el-input>
                </el-form-item>
                <el-form-item label="移动电话">
                  <el-input v-model="registerForm.mobilePhone"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱">
                  <el-input v-model="registerForm.email"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleRegister">注册</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <el-row v-if="activeIndex===2">

          </el-row>
        </el-col>

      </el-row>
    </div>


  </div>
</template>

<script>
  import {setToken,setTokenHead,setTokenHeaderName,setUser} from '../util/auth'
  export default {
    name: 'Login',

    data() {
      return {

        activeIndex: 1,

        loginForm: {
          //用户名
          username: 'test',
          //密码
          password: '123456'
        },

        //注册表单数据
        registerForm: {
          //用户名
          username: 'test',
          //密码
          password: '123456',
          //真实姓名
          realname: '李测试',
          //证件类型
          identityCardType: 1,
          //证件号码
          identityCardNo: '430922199811136319',
          //手机号码
          mobilePhone: '13866778899',
          //电子邮箱
          email: 'test@163.com',
          //性别
          gender: 1,
          //出生年月日
          birthDate: '1998-11-13'
        },

        //确认密码
        password2: '123456'
      }
    },

    methods: {

      //注册
      handleRegister(){
        this.api.__api__Register(this.registerForm)
          .then(data=>{
            this.$message.success(data.message);
          }).catch(error=>null);
      },

      //登录
      handleLogin(){
        this.api.__api__Login(this.loginForm.username,this.loginForm.password)
          .then(data=>{
            setUser(data.data.user);
            setTokenHead(data.data.tokenHead);
            setTokenHeaderName(data.data.tokenHeaderName);
            setToken(data.data.token);
            this.$store.commit('setUser',data.data.user);
            this.$router.push("/home").catch(error=>null);
          },error=>{}).catch(error=>null);
      }
    }
  }
</script>

<style scoped lang="less">
  .content {
    width: 100%;
    height: 90%;
    margin: 0px;
    padding: 0px;
    transform: translateY(11%);


  }

  .login {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../../src/assets/img/login_bgc.jpg');
  }

  .login-area {
    height: 90%;
    margin-left: 30px;
    border-radius: 5px;
    background-color: rgba(238, 238, 238, 0.2) !important;
    filter: alpha(opacity=20);
    color: white;
    box-shadow:
    50px -4px 8px 10px rgba(238,238,238,0.1),
    30px 0px 8px 10px rgba(238,238,238,0.1),
  ;

  }

  .login-area:hover {
    height: 90%;
    margin-left: 30px;
    border-radius: 5px;
    background-color: rgba(238, 238, 238, 0.2) !important;
    filter: alpha(opacity=20);
    color: white;
    box-shadow: 180px -28px 8px 10px rgba(238,238,238,0.2),
      150px -24px 8px 10px rgba(238,238,238,0.1),
      130px -20px 8px 10px rgba(238,238,238,0.1),
      110px -16px 8px 10px rgba(238,238,238,0.1),
      90px -12px 8px 10px rgba(238,238,238,0.1),
      70px -8px 8px 10px rgba(238,238,238,0.1),
      50px -4px 8px 10px rgba(238,238,238,0.1),
    30px 0px 8px 10px rgba(238,238,238,0.1),
  ;

  }

  .register-button, .login-button {
    width: 80px;
    height: 40px;
    display: inline;
    text-align: center;
    font-size: 20px;
    border: 0px solid #eeeeee;
    cursor: pointer;
  }

  .login-title {
    background-color: white;
    height: 60px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

  }

  .active-button {
    border-bottom: 1px solid black;
  }

  .login-form {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .login-form input, .login-form button {
    width: 400px;
    height: 40px;
    display: block;
    margin: 50px;
    font-size: 20px;
    border-radius: 5px;
    padding: 0px;
  }

  .login-form button {
    width: 305px;
    background-color: #409EFF;
    border: 0px solid #eeeeee;
  }

  .register-form {
    padding-top: 20px;
    display: flex;
    /*align-items: center;*/
    /*justify-content: center;*/
    height: 100%;
    color:white;
  }

  .register-form .el-col{
    margin-left:30px;
  }

  .register-form .el-input, .register-form .el-option {
    color: white;
    margin: 10px;
    font-size: 20px;
    border-radius: 5px;



  }

  .register-form button {
    width: 140px;
    background-color: #409EFF;
    border: 0px solid #eeeeee;
    height: 40px;
    margin: 10px;
    border-radius: 5px;
    font-size: 20px;
  }

  .el-form-item label{
    color:white;
    font-size: 20px;
  }





</style>
